<template>
  <div>
    <span class="spancal">检查作业</span>
    <div class="bordercal">
      <el-radio-group
        v-model="tabPosition"
        style="margin-bottom: 10px; margin-left: 5px; margin-top: 10px"
      >
        <el-radio-button label="检查">检查</el-radio-button>
        <el-radio-button label="探伤">探伤</el-radio-button>
      </el-radio-group>
      <div v-if="tabPosition == '检查'">
        <span class="spantit">检查计划</span>
        <el-table v-loading="loading" :data="railList" height="280px" border>
          <el-table-column label="计划名称" prop="railwayName" min-width="80" />
          <el-table-column label="日程" prop="progressType" min-width="80" />
          <el-table-column
            label="检查周期"
            prop="startMileage"
            min-width="80"
          />
          <el-table-column
            label="下次检查日期"
            prop="endMileage"
            min-width="80"
          >
          </el-table-column>
          <el-table-column label="巡检人" prop="railCode" min-width="80">
          </el-table-column>
        </el-table>
        <span class="spantit">检查任务</span>
        <el-table v-loading="loading" :data="railList" height="280px" border>
          <el-table-column label="任务编号" prop="railwayName" min-width="80" />
          <el-table-column
            label="任务名称"
            prop="progressType"
            min-width="80"
          />
          <el-table-column
            label="计划时间"
            prop="startMileage"
            min-width="80"
          />
          <el-table-column label="巡检人" prop="endMileage" min-width="80">
          </el-table-column>
          <el-table-column label="检查方法" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="状态" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="操作" prop="railCode" min-width="80">
          </el-table-column>
        </el-table>
        <span class="spantit">检查记录</span>
        <el-table v-loading="loading" :data="railList" height="280px" border>
          <el-table-column label="任务编号" prop="railwayName" min-width="80" />
          <el-table-column
            label="设备管理工区"
            prop="progressType"
            min-width="80"
          />
          <el-table-column label="线别" prop="startMileage" min-width="80" />
          <el-table-column label="里程" prop="endMileage" min-width="80">
          </el-table-column>
          <el-table-column label="计划日期" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="检查时间" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column
            label="病害及变化详细情况"
            prop="railCode"
            min-width="80"
          >
          </el-table-column>
          <el-table-column label="巡检人" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="大轨缝" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="垫板超限" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="肥边" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="连续瞎缝" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="接头翻白" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="锚固" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="检查人员" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column
            label="处理措施/临时防范措施"
            prop="railCode"
            min-width="80"
          >
          </el-table-column>
          <el-table-column label="备注" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="图片" prop="railCode" min-width="80">
          </el-table-column>
        </el-table>
      </div>
      <div v-if="tabPosition == '探伤'">
        <span class="spantit">探伤计划</span>
        <el-table v-loading="loading" :data="railList" height="280px" border>
          <el-table-column label="线别" prop="railwayName" min-width="80" />
          <el-table-column label="正线" prop="progressType" min-width="80" />
          <el-table-column label="专线" prop="startMileage" min-width="80" />
          <el-table-column label="正岔" prop="endMileage" min-width="80">
          </el-table-column>
          <el-table-column label="专岔" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="焊缝-铝焊" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="焊缝-气焊" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="焊缝-接焊" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="探伤日期" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="负责人" prop="railCode" min-width="80">
          </el-table-column>
        </el-table>
        <span class="spantit">探伤记录</span>
        <el-table v-loading="loading" :data="railList" height="280px" border>
          <el-table-column label="发现时间" prop="railwayName" min-width="80" />
          <el-table-column label="线别" prop="progressType" min-width="80" />
          <el-table-column label="里程" prop="startMileage" min-width="80" />
          <el-table-column label="轨号" prop="endMileage" min-width="80">
          </el-table-column>
          <el-table-column label="股别" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="标记" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="伤损类型" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="桥隧" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="标记" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="状态" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="备注" prop="railCode" min-width="80">
          </el-table-column>
          <el-table-column label="负责人" prop="railCode" min-width="80">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <span class="spancal">维修作业</span>
    <div class="bordercal">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="90px"
      >
        <el-form-item label="钢轨编号">
          <el-input
            v-model="queryParams.startMileageNumber"
            placeholder="请输入"
            clearable
            style="width: 140px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="维修原因">
          <el-select
            filterable
            v-model="queryParams.progressType"
            placeholder="请输入"
            clearable
            style="width: 140px"
          >
            <el-option
              v-for="dict in railList"
              :key="dict.progressType"
              :label="dict.progressType"
              :value="dict.progressType"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="维修负责人">
          <el-input
            v-model="queryParams.startMileageNumber"
            placeholder="请输入"
            clearable
            style="width: 140px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="维修状态">
          <el-input
            v-model="queryParams.endMileage"
            placeholder="请输入"
            clearable
            style="width: 140px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="计划维修时间">
          <el-date-picker
            v-model="queryParams.tiem"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList" style="width: 90px"
            >查询</el-button
          >
          <el-button @click="cleardata" style="width: 90px">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="railList" height="420px" border>
        <el-table-column label="故障编码" prop="railwayName" min-width="80" />
        <el-table-column label="轨号" prop="progressType" min-width="80" />
        <el-table-column label="钢轨位置" prop="startMileage" min-width="80" />
        <el-table-column label="故障描述" prop="endMileage" min-width="80">
        </el-table-column>
        <el-table-column label="故障类别" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="故障时间" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="故障来源" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="上报用户" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="设备编号" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修状态" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column
          label="维修方案（可查看）"
          prop="railCode"
          min-width="80"
        >
        </el-table-column>
        <el-table-column label="维修原因" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修类别" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修范围" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修费用" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="经费来源" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="施工单位" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="计划维修日期" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修完成日期" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="作业流程" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修负责人" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修耗时" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修周期" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="维修方法" prop="railCode" min-width="80">
        </el-table-column>
      </el-table>
      <p>
        作业计划量:<span>2637</span>,作业完成量:<span>8723</span>,作业计划率:<span
          >89%</span
        >
      </p>
    </div>
    <span class="spancal">养护作业</span>
    <div class="bordercal">
      <span class="spantit">计划</span>
      <el-table v-loading="loading" :data="railList" height="280px" border>
        <el-table-column
          label="保养计划名称"
          prop="railwayName"
          min-width="80"
        />
        <el-table-column label="日程" prop="progressType" min-width="80" />
        <el-table-column label="养护周期" prop="startMileage" min-width="80" />
        <el-table-column label="执行人" prop="endMileage" min-width="80">
        </el-table-column>
        <el-table-column label="操作" prop="railCode" min-width="80">
        </el-table-column>
      </el-table>
      <span class="spantit">待执行计划</span>
      <el-table v-loading="loading" :data="railList" height="280px" border>
        <el-table-column
          label="优先级"
          prop="railwayName"
          min-width="80"
          sortable
        />
        <el-table-column label="类别" prop="progressType" min-width="80" />
        <el-table-column label="任务编号" prop="startMileage" min-width="80" />
        <el-table-column label="任务名称" prop="endMileage" min-width="80">
        </el-table-column>
        <el-table-column label="养护方法" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="设备" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="计划日期" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="执行人" prop="railCode" min-width="80">
        </el-table-column>
      </el-table>
      <span class="spantit">已完成任务</span>
      <el-table v-loading="loading" :data="railList" height="280px" border>
        <el-table-column
          label="优先级"
          prop="railwayName"
          min-width="80"
          sortable
        />
        <el-table-column label="类别" prop="progressType" min-width="80" />
        <el-table-column label="任务编号" prop="startMileage" min-width="80" />
        <el-table-column label="任务名称" prop="endMileage" min-width="80">
        </el-table-column>
        <el-table-column label="设备" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="完成日期" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="耗时" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="养护类别" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="养护范围" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="养护费用" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="养护来源" prop="railCode" min-width="80">
        </el-table-column>
        <el-table-column label="管养单位" prop="railCode" min-width="80">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup name="resume">
// import {  } from "@/api/main/api.js";
import { reactive, ref, toRefs } from "vue";
const { proxy } = getCurrentInstance();
const tabPosition = ref("检查");
const data = reactive({
  queryParams: {},
  railList: [],
});
const { queryParams, railList } = toRefs(data);
</script>

<style scoped lang="scss">
.bordercal {
  border: 1px solid #4faeff;
  padding: 10px;
  box-sizing: border-box;
  height: 560px;
  overflow: auto;
  padding: 0px 10px;
}
.spantit {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  margin: 5px 0px;
  display: inline-block;
}
.spancal {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  height: 30px;
  background: #4faeff;
  color: #fff;
  line-height: 30px;
  font-size: 18px;
  display: block;
  margin: 15px 0;
}
</style>
